<template>
  <div class="orderManagement">
    <h3>订单管理</h3>
    <div class="search">
      <div class="cond2 cond">
        <label>支付状态</label>
        <el-select v-model="search1" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="cond2 cond">
        <label>订单状态</label>
        <el-select v-model="search2" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="cond2 cond">
        <label>设备类型</label>
        <el-select v-model="search3" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="cond2 cond">
        <label>支付方式</label>
        <el-select v-model="search4" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="cond2 cond">
        <label>卡类型</label>
        <el-select v-model="search5" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="cond2 cond">
        <label>订单类型</label>
        <el-select v-model="search6" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="cond2 cond">
        <label>订单来源</label>
        <el-select v-model="search7" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="cond2 cond">
        <label>支付通道</label>
        <el-select v-model="search8" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="cond1 cond">
        <el-input placeholder="请输入订单号" v-model="search9">
          <template slot="prepend">订单号</template>
        </el-input>
      </div>
      <div class="cond1 cond">
        <el-input placeholder="请输入用户姓名" v-model="search10">
          <template slot="prepend">用户姓名</template>
        </el-input>
      </div>
      <div class="cond1 cond">
        <el-input placeholder="请输入用户ID" v-model="search11">
          <template slot="prepend">用户ID</template>
        </el-input>
      </div>
      <div class="cond2 cond">
        <label>支付时间</label>
        <el-date-picker
          v-model="search12"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </div>
      <div class="cond2 cond">
        <label>创建时间</label>
        <el-date-picker
          v-model="search13"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>
    </div>
    <div class="list">
      <el-table
        border
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="序号"
          sortable
          width="90"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="订单号"
          sortable
          width="200"
        ></el-table-column>
        <el-table-column header-align="center" align="center" prop="num" label="用户姓名" width="100"></el-table-column>
        <el-table-column header-align="center" align="center" prop="num" label="用户ID" width="100"></el-table-column>
        <el-table-column header-align="center" align="center" prop="num" label="VIP卡" width="100"></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="订单金额"
          sortable
          width="120"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="订单实付金额"
          sortable
          width="130"
        ></el-table-column>
        <el-table-column header-align="center" align="center" prop="num" label="订单类型" width="100"></el-table-column>
        <el-table-column header-align="center" align="center" prop="num" label="订单来源" width="100"></el-table-column>
        <el-table-column header-align="center" align="center" prop="num" label="订单状态" width="100"></el-table-column>
        <el-table-column header-align="center" align="center" prop="num" label="支付状态" width="100"></el-table-column>
        <el-table-column header-align="center" align="center" prop="num" label="支付方式" width="100"></el-table-column>
        <el-table-column header-align="center" align="center" prop="num" label="支付通道" width="100"></el-table-column>
        <el-table-column header-align="center" align="center" prop="num" label="设备类型" width="100"></el-table-column>
        <el-table-column header-align="center" align="center" prop="num" label="用户ip" width="100"></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="支付时间"
          sortable
          width="150"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="创建时间"
          sortable
          width="150"
        ></el-table-column>
        <el-table-column header-align="center" align="center" label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="success" @click="handleBudan(scope.$index, scope.row)">补单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="100"
        layout="total, prev, pager, next, jumper"
        :total="1000"
      ></el-pagination>
    </div>
    <!-- //补单弹窗 -->
    <el-dialog title="补单" :visible.sync="centerDialogVisible" width="40%" center>
      <div class="goldRow">
        <span>订单编号：</span>
        <el-input placeholder="请输入订单编号" v-model="orderNum" clearable></el-input>
      </div>
      <div class="goldRow">
        <span>备注：</span>
        <textarea v-model="note"></textarea>
      </div>
      <div class="dialogBtn">
        <el-button type="primary" size="small" @click="submitBuDan">提交</el-button>
        <el-button type="info" size="small" @click="cancelBuDan">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "orderManagement",
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      search1: "",
      search2: "",
      search3: "",
      search4: "",
      search5: "",
      search6: "",
      search7: "",
      search8: "",
      search9: "",
      search10: "",
      search11: "",
      search12: "",
      search13: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          num: 1,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          num: 2,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          num: 3,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          num: 4,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        }
      ],
      currentPage1: 1,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      centerDialogVisible:false,
      //订单编号
      orderNum: "",
      //备注
      note: ""
    };
  },
  mounted() {},
  methods: {
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage1 = val;
    },
    //显示补单弹窗
    handleBudan(index, row) {
      this.centerDialogVisible = true;
    },
    //提交补单
    submitBuDan(){

    },
    //取消补单
    cancelBuDan(){
        this.centerDialogVisible = false;
    },
  }
};
</script>
<style scoped>
h3{
    padding:.2rem;
    color:#3c763d;
}
.search {
  display: flex;
  margin-top: 0.2rem;
  padding-left: 0.2rem;
  width: 100%;
  flex-wrap: wrap;
}
.el-input {
  width: 2.5rem;
}
label {
  width: 0.83rem;
  height: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  font-size: 14px;
}
.cond {
  display: flex;
  margin-right: 0.4rem;
  margin-bottom: 0.1rem;
}
.search .el-select >>> .el-input__inner {
  border-left: none;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.search .el-select {
  width: 1.67rem;
}
.opration {
  margin-top: 0.2rem;
  padding-left: 0.2rem;
}
.page {
  margin-top: 0.2rem;
  display: flex;
  justify-content: center;
}
.list {
  margin-top: 0.2rem;
  padding: 0 0.1rem;
  font-size: 0.12rem;
}
.dialogBtn {
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;
}
.goldRow{
  margin-bottom:.1rem;
}
.goldRow span{
  width:.9rem;
  display:inline-block;
}
.goldRow textarea{
    width:2.5rem;
    height:1rem;
    padding:.05rem;
    border:1px solid #DCDFE6;
    border-radius: 3px;
}
</style>